<script>
	import api from '@/api'

	export default {
		name: 'Tower',
		data() {
			return {
				noClick:true,//放连点
				towerList: [],
				// 当前等级
				level: 1,
				current: {},
				rankList: [],
				dialogStatus: false,
				scrollTop: 0,
				isTop: false,
				/**
				 * 宝箱赏品列表
				 */
				prizeList: [],
				loading: false,
				resultPrize: {
					goods_image: '',
					goods_name: '',
					price: '',
				},
			}
		},
		onReady() {
			uni.pageScrollTo({
				scrollTop: 1000,
			})
		},
		onLoad() {
			this.getTowers()
		},
		methods: {
			again() {
				this.$refs.alertDialog.close('dialog')
				if (!this.dialogStatus) {
					this.$nextTick(() => {
						this.scrollTop = 2000
					})
				}
			},
			back() {
				this.$refs.alertDialog.close('dialog')
				uni.navigateBack()
			},
			async getTowers() {
				await uni.showLoading()
				try {
					const result = await api.towers.index()
					if (result.code === 200) {
						this.towerList = result.data.data
						this.level = result.data.user_level
						this.rankList = result.data.ranking_list
						this.isTop = result.data.is_top
					}
				} catch (e) {
					console.log(e)
				} finally {
					uni.hideLoading()
				}
			},
			show(item) {
				this.current = item
				this.$refs.confirmDialog.open('center')
			},
			async draw() {
				if (this.loading) {
					return
				}
				this.$refs.confirmDialog.close("dialog")
				this.loading = true
				// 开奖
				try {
					const result = await api.towers.draw({
						level_id: this.current.level_id,
					})
					if (result.code === 200) {
						this.isTop = result.data.is_top
						if (this.isTop) {
							await this.showBox()
							return
						}
						this.dialogStatus = result.data.status
						this.$refs.alertDialog.open('center')
					} else {
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								title: result.msg
							})
						}, 1000)
					}
				} catch (e) {
					console.log(e)
				} finally {
					await this.getTowers()
					this.loading = false
				}
			},
			showRule() {
				this.$refs.ruleDialog.show()
			},
			async showBox() {
				console.log('12312')
				// show box
				this.$refs.prizeDialog.open('center')

				const result = await api.towers.prize()
				if (result.code === 200) {
					this.prizeList = result.data.data
				}
			},
			async openBox() {
				const result = await api.towers.open()
				if (result.code === 200) {
					this.$refs.prizeDialog.close()
					this.$refs.resultDialog.open('center')
					this.resultPrize = result.data
					await this.getTowers()
				}
			},
		},
	}
</script>

<template>
	<view class="tower">
		<scroll-view scroll-y style="overflow: hidden; height: 100vh" :scroll-top="scrollTop">

			<my-header :backgroundColor="'none'"></my-header>
			<view class="tower-content">
				<view class="tower-item" v-for="(item, index) in towerList" :key="item.id"
					:class="{ bottom: index === 0 }">
					<image @click="$noMultipleClicks(show,item)" v-if="level + 1 === item.level_id" class="lock unlock"
						src="https://www.dingxians.cn/upload/images/tower/unlock.png"></image>
					<image v-else class="lock" src="https://www.dingxians.cn/upload/images/tower/lock.png"></image>
				</view>
				<view class="tower-item top" @click="showBox">
					<image  src="https://www.dingxians.cn/upload/images/tower/box.png" class="box" />
				</view>
			</view>
		</scroll-view>

		<view class="rank-list">
			<view class="rank-title">排行榜</view>
			<view class="rank-content">
				<view class="rank-item" v-for="item in rankList" :key="item.id">
					<image class="avatar" :src="item.avatar"></image>
					<text class="nickname">{{ item.nickname }}</text>
					<text class="level">第{{ item.level_id }}关</text>
				</view>
			</view>
		</view>

		<view class="action-group">
			<image @click="showRule" class="action-btn" src="https://www.dingxians.cn/upload/images/tower/rule.png">
			</image>
			<image @click="getTowers" class="action-btn" src="https://www.dingxians.cn/upload/images/tower/refresh.png">
			</image>
		</view>

		<my-alert-dialog title="规则" ref="ruleDialog">
			<view style="min-height: 100px; margin-top: 30px">向上攀爬，爬到塔顶将获得一个宝箱奖励</view>
		</my-alert-dialog>

		<uni-popup ref="confirmDialog" type="dialog">
			<view class="confirm-dialog">
				<view class="goods-list">
					<view class="goods-item">
						<image class="goods-img" src="https://www.dingxians.cn/upload/images/tower/key-1.png"
							mode="scaleToFill" />
						<view class="goods-name">银钥匙</view>
						<text class="goods-pro">{{ current.failed_probability }}%</text>
					</view>
					<view class="goods-item">
						<image class="goods-img" src="https://www.dingxians.cn/upload/images/tower/key-2.png"
							mode="scaleToFill" />
						<view class="goods-name">金钥匙</view>
						<text class="goods-pro">{{ current.succeed_probability }}%</text>
					</view>
				</view>
				<view class="start-play" @click="draw">
					开始闯关
					<view class="play-price">￥{{ current.price }}</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="alertDialog" type="dialog">
			<view class="dialog-content" :class="{ success: dialogStatus }">
				<view class="action-btn-group">
					<image @click="again"
						:src="`https://www.dingxians.cn/upload/images/tower/btn-${dialogStatus ? 'continue' : 'again'}.png`"
						class="action-btn"></image>
					<image @click="back" src="https://www.dingxians.cn/upload/images/tower/btn-back.png"
						class="action-btn"></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="prizeDialog" type="dialog">
			<view class="prize-content">
				<view class="prize-list">
					<view class="prize-item" v-for="item in prizeList" :key="item.id">
						<image class="prize-img" :src="item.goods_image"></image>
						<view class="prize-name">{{ item.goods_name }}</view>
						<view class="prize-price">￥{{ item.price }}</view>
					</view>
				</view>

				<view v-if="isTop" @click="openBox" class="open-box btn-primary">开启宝箱</view>

				<image class="close-btn" src="https://www.dingxians.cn/upload/images/shop/close-btn.png"
					@click="$refs.prizeDialog.close('dialog')"></image>
			</view>
		</uni-popup>

		<uni-popup ref="resultDialog" type="dialog">
			<view class="result-dialog">
				<image class="top-img" src="https://www.dingxians.cn/upload/images/tower/bg-success.png"
					mode="scaleToFill" />

				<view class="result-content">
					<image class="result-img" :src="resultPrize.goods_image" mode="scaleToFill" />
					<view class="result-name">{{ resultPrize.goods_name }}</view>
					<view class="result-price">￥{{ resultPrize.price }}</view>
				</view>

				<image class="close-btn" @click="$refs.resultDialog.close('dialog')"
					src="https://www.dingxians.cn/upload/images/shop/close.png" mode="scaleToFill" />
			</view>
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	@keyframes box-anim {
		to {
			margin-top: -30px;
		}
	}

	.tower {
		height: 100vh;
		background: url('https://www.dingxians.cn/upload/images/tower/bg.png') 100%/100% fixed;

		.rank-list {
			position: absolute;
			top: 250rpx;
			right: 0;
			width: 260rpx;
			height: 330rpx;
			display: flex;
			flex-direction: column;
			color: white;
			background: url('https://www.dingxians.cn/upload/images/tower/rank.png') 100%/100%;

			.rank-title {
				font-size: 28rpx;
				margin-top: 50rpx;
				text-align: center;
			}

			.rank-content {
				flex: 1;
				overflow-y: scroll;
				box-sizing: border-box;
				padding: 10rpx 30rpx;

				.rank-item {
					display: flex;
					align-items: center;
					font-size: 16rpx;
					margin-bottom: 20rpx;

					.avatar {
						width: 40rpx;
						height: 40rpx;
					}

					.nickname {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						margin: 0 5rpx 0 8rpx;
						flex: 1;
					}
				}
			}
		}

		.action-group {
			top: 600rpx;
			right: 20rpx;
			position: absolute;
			display: flex;
			flex-direction: column;

			.action-btn {
				width: 100rpx;
				height: 100rpx;

				&:last-child {
					margin-top: 30rpx;
				}
			}
		}

		.tower-content {
			/*height: 100vh;*/
			display: flex;
			flex-direction: column-reverse;
			position: relative;

			.tower-item {
				position: relative;
				flex-shrink: 0;
				height: 270rpx;
				background: url('https://www.dingxians.cn/upload/images/tower/tower-item.png') 100%/100%;

				&.top {
					height: 230rpx;
					background: url('https://www.dingxians.cn/upload/images/tower/tower-top.png') 100%/100%;

					.box {
						width: 120rpx;
						height: 120rpx;
						position: absolute;
						top: 120rpx;
						left: 50%;
						transform: translateX(-50%);
						animation: box-anim linear alternate infinite 2s;
					}
				}

				&.bottom {
					height: 400rpx;
					background: url('https://www.dingxians.cn/upload/images/tower/tower-bottom.png') 100%/100% no-repeat;

					.lock {
						bottom: 150rpx;
					}

					.unlock {
						bottom: 120rpx;
					}
				}

				.lock {
					position: absolute;
					bottom: 30rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 210rpx;
					height: 86rpx;
				}

				.unlock {
					bottom: 10rpx;
					width: 140rpx;
					height: 140rpx;
				}
			}
		}

		.dialog-content {
			width: 670rpx;
			height: 550rpx;
			background: url('https://www.dingxians.cn/upload/images/tower/bg-dialog-fail.png') 100%/100% no-repeat;

			&.success {
				background-image: url('https://www.dingxians.cn/upload/images/tower/bg-dialog-success.png');
			}

			.action-btn-group {
				position: absolute;
				left: 0;
				bottom: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				.action-btn {
					width: 240rpx;
					height: 68rpx;

					&:last-child {
						margin-left: 30rpx;
					}
				}
			}
		}

		.prize-content {
			width: 710rpx;
			color: white;
			height: 420rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 30rpx;
			background: url('https://www.dingxians.cn/upload/images/tower/bg-dialog-box.png') 100%/100% no-repeat;

			.prize-list {
				flex: 1;
				display: flex;
				padding-top: 95rpx;
				gap: 20rpx;
				overflow-x: scroll;
				align-content: flex-start;

				.prize-item {
					text-align: center;

					.prize-img {
						width: 100rpx;
						height: 100rpx;
					}

					.prize-name {
						width: 160rpx;
						font-size: 24rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.prize-price {
						font-size: 20rpx;
					}
				}
			}

			.open-box {
				width: 200rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				margin: 20rpx auto 0;
			}

			.close-btn {
				position: absolute;
				right: 0;
				top: -100rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}

		.result-dialog {
			.top-img {
				width: 750rpx;
				height: 110rpx;
				margin-bottom: 100rpx;
			}

			.result-content {
				margin: 0 auto;
				width: 378rpx;
				height: 500rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: white;
				font-size: 26rpx;
				background: url('https://www.dingxians.cn/upload/images/tower/bg-dialog-result.png') 100%/100% no-repeat;

				.result-img {
					width: 170rpx;
					height: 170rpx;
				}

				.result-name {
					margin-top: 20rpx;
					width: 80%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
				}
			}

			.close-btn {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: 100rpx auto 0;
			}
		}

		.confirm-dialog {
			color: white;
			overflow: hidden;
			width: 670rpx;
			height: 550rpx;
			background: url('https://www.dingxians.cn/upload/images/tower/bg-dialog-play.png') 100%/100% no-repeat;

			.goods-list {
				margin: 280rpx auto 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.goods-item {
					margin-right: 30rpx;
					width: 130rpx;
					height: 130rpx;
					position: relative;
					background: rgba(39, 41, 194, 0.5);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					border: 2rpx solid #ffffff;

					.goods-img {
						display: block;
						margin: 20rpx auto 0;
						width: 60%;
						height: 60%;
					}

					.goods-name {
						line-height: 24rpx;
						font-size: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
					}

					.goods-pro {
						position: absolute;
						left: 4rpx;
						top: 4rpx;
						font-size: 16rpx;
					}
				}
			}

			.start-play {
				margin: 40rpx auto 0;
				width: 235rpx;
				height: 66rpx;
				background: url('https://www.dingxians.cn/upload/images/tower/btn-play.png') 100%/100%;
				text-align: center;
				font-size: 22rpx;
				box-sizing: border-box;
				padding-top: 4rpx;

				.play-price {
					font-size: 14rpx;
					line-height: 18rpx;
				}
			}
		}
	}
</style>